import {PlusOutlined} from '@ant-design/icons';
import {
  ModalForm,
  ProForm, ProFormDatePicker,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import {Button, Form, message} from 'antd';
import React from "react";
import {string} from "prop-types";

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

interface Props {
  content: string
};

const Register: React.FC<Props> = ({content}) => {
  const [form] = Form.useForm<{ name: string; company: string }>();
  return (
    <ModalForm<{
      name: string;
      company: string;
    }>
      title="我的注册"
      trigger={
        <p>
          {content}
        </p>
      }
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => console.log('run'),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        await waitTime(2000);
        console.log(values.name);
        message.success('提交成功');
        return true;
      }}
    >
      <ProFormText
        width="md"
        name="name"
        label="账号"
        tooltip="仅支持英文和数字"
        placeholder="请输入账号名"
      />

      <ProFormText
        width="md"
        name="password"
        label="密码"
        placeholder="请输入密码"
      />
      <ProFormText
        width="md"
        name="Re_password"
        label="确认密码"
        placeholder="请输入确认密码"
      />
      <ProForm.Group>
        <ProFormText
          width="md"
          name="contract"
          label="邮箱"
          placeholder="请输入邮箱"
        />
        <ProFormText width="md" name="contractTime" label="电话" placeholder="请输入电话"/>
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          request={async () => [
            {
              value: 'chapter1',
              label: '数字研发中心'
            },
            {
              value: 'chapter2',
              label: '四总一部'
            },
            {
              value: 'chapter3',
              label: '六总一部'
            },
            {
              value: 'chapter4',
              label: '六总二部'
            },
            {
              value: 'chapter5',
              label: '七总四部'
            },
            {
              value: 'chapter6',
              label: '七总六部'
            },
            {
              value: 'chapter7',
              label: '运维部门'
            }
          ]}
          width="sm"
          name="department"
          label="所属部门"
        />
      </ProForm.Group>
      <ProFormDatePicker width="sm" name="id" label="生日"/>

    </ModalForm>
  );
};

export default Register;
